<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=7" />
<title>Math/Graph TinyMCE Demo</title>

<script type="text/javascript" src="jscripts/tiny_mce/plugins/asciimath/js/ASCIIMathMLwFallback.js"></script>
<script type="text/javascript">
	var AMTcgiloc = "http://www.imathas.com/cgi-bin/mimetex.cgi";  		
	//change me
</script>

<!-- TinyMCE -->
<script type="text/javascript" src="jscripts/tiny_mce/tiny_mce.js"></script>

<script type="text/javascript">
function initEditorById(id){	  
		tinyMCE.init({
			mode : "exact",
			theme : "advanced",
			theme_advanced_buttons1 : "fontselect,fontsizeselect,formatselect,bold,italic,underline,strikethrough,separator,sub,sup,separator,cut,copy,paste,undo,redo",
			theme_advanced_buttons2 : "justifyleft,justifycenter,justifyright,justifyfull,separator,numlist,bullist,outdent,indent,separator,forecolor,backcolor,separator,hr,link,unlink,image,table,code,separator,asciimath,asciimathcharmap,asciisvg",
			theme_advanced_buttons3 : "",
			theme_advanced_fonts : "Arial=arial,helvetica,sans-serif,Courier New=courier new,courier,monospace,Georgia=georgia,times new roman,times,serif,Tahoma=tahoma,arial,helvetica,sans-serif,Times=times new roman,times,serif,Verdana=verdana,arial,helvetica,sans-serif",
			theme_advanced_toolbar_location : "top",
			theme_advanced_toolbar_align : "left",
			theme_advanced_statusbar_location : "bottom",
			plugins : 'safari,asciimath,asciisvg,table,inlinepopups',
		   
			AScgiloc : 'http://www.imathas.com/editordemo/php/svgimg.php',			      //change me  
			ASdloc : 'http://www.imathas.com/editordemo/jscripts/tiny_mce/plugins/asciisvg/js/d.svg',  //change me  				
			content_css : "css/content.css",
			elements: id,
			language : "en"
		});
}
function InitEditorByClass(className){
	if(className){		
			tinyMCE.init({
			mode : "specific_textareas",
			theme : "advanced",
			theme_advanced_buttons1 : "fontselect,fontsizeselect,formatselect,bold,italic,underline,strikethrough,separator,sub,sup,separator,cut,copy,paste,undo,redo",
			theme_advanced_buttons2 : "justifyleft,justifycenter,justifyright,justifyfull,separator,numlist,bullist,outdent,indent,separator,forecolor,backcolor,separator,hr,link,unlink,image,table,code,separator,asciimath,asciimathcharmap,asciisvg",
			theme_advanced_buttons3 : "",
			theme_advanced_fonts : "Arial=arial,helvetica,sans-serif,Courier New=courier new,courier,monospace,Georgia=georgia,times new roman,times,serif,Tahoma=tahoma,arial,helvetica,sans-serif,Times=times new roman,times,serif,Verdana=verdana,arial,helvetica,sans-serif",
			theme_advanced_toolbar_location : "top",
			theme_advanced_toolbar_align : "left",
			theme_advanced_statusbar_location : "bottom",
			plugins : 'safari,asciimath,asciisvg,table,inlinepopups',
		   
			AScgiloc : 'http://www.imathas.com/editordemo/php/svgimg.php',			      //change me  
			ASdloc : 'http://www.imathas.com/editordemo/jscripts/tiny_mce/plugins/asciisvg/js/d.svg',  //change me  				
			content_css : "css/content.css",
			editor_selector : className,
			language : "en"
		});	
	}	
}
</script>
<!-- /TinyMCE -->

</head>
<body onload="InitEditorByClass('editor')">
<form method="post" action="output.php">
	<h3>TinyMCE Math/Graph Plugins Example</h3>

	<p>
		This page shows some buttons and plugins that are included in the TinyMCE core package, but is intended primarily to 
		demonstrate ASCIIMath and ASCIIsvg plugins for TinyMCE.
		There are more examples on how to use TinyMCE in the <a href="http://wiki.moxiecode.com/examples/tinymce/">Wiki</a>.
	</p>

	<!-- Gets replaced with TinyMCE, remember HTML in a textarea should be encoded -->
<textarea id="elm1" name="elm1" class="editor" rows="15" cols="80" style="width: 80%">
&lt;p&gt;
Include text along with math equations like &lt;span class="AM"&gt;`x=(-b+-sqrt(b^2-4ac))/(2a)`&lt;/span&gt; in your documents   
&lt;/p&gt;
&lt;p&gt;
Click on the math formula to edit the AsciiMath expression used to generate it.
&lt;/p&gt;
&lt;p&gt;
To edit the graph, click on the graph, then click the Graph button in the toolbar to open the control panel.
&lt;/p&gt;
&lt;p&gt;
&lt;embed type="image/svg+xml" style="width: 300px; height: 200px; vertical-align: middle; float: none;" src="http://www.imathas.com/editordemo/jscripts/tiny_mce/plugins/asciisvg/js/d.svg" sscr="-7.5,7.5,-5,5,1,1,1,1,1,300,200,func,x^2,null,0,0,,,black,1,none" /&gt;
&lt;/p&gt;
</textarea>
<input type="button" value="asdasd" onclick="initEditorById('elm2');">
<textarea id="elm2" name="elm2" class="elm2" rows="15" cols="80" style="width: 80%">
&lt;p&gt;
Include text along with math equations like &lt;span class="AM"&gt;`x=(-b+-sqrt(b^2-4ac))/(2a)`&lt;/span&gt; in your documents   
&lt;/p&gt;
&lt;p&gt;
&lt;/p&gt;
&lt;p&gt;
&lt;embed type="image/svg+xml" style="width: 300px; height: 200px; vertical-align: middle; float: none;" src="http://www.imathas.com/editordemo/jscripts/tiny_mce/plugins/asciisvg/js/d.svg" sscr="-7.5,7.5,-5,5,1,1,1,1,1,300,200,func,x^2,null,0,0,,,black,1,none" /&gt;
&lt;/p&gt;

</textarea>

		
	<div>
		Some integration calls: the first two seem to be having issues with asciimath plugin
		<a href="javascript:;" onmousedown="tinyMCE.get('elm1').show();">[Show]</a>
		<a href="javascript:;" onmousedown="tinyMCE.get('elm1').hide();">[Hide]</a>
		
		<a href="javascript:;" onmousedown="alert(tinyMCE.get('elm1').getContent());">[Get contents]</a>
		<a href="javascript:;" onmousedown="alert(tinyMCE.get('elm1').selection.getContent());">[Get selected HTML]</a>
		<a href="javascript:;" onmousedown="alert(tinyMCE.get('elm1').selection.getContent({format : 'text'}));">[Get selected text]</a>
	</div>

	<br />
	<input type="submit" name="save" value="Submit" />
	<input type="reset" name="reset" value="Reset" />
</form>
<p>Download source: <a href="http://www.imathas.com/editordemo/tinymcemathgraphplugins.zip">zip format</a>
		   <a href="http://www.imathas.com/editordemo/tinymcemathgraphplugins.tar.gz">tar.gz format</a>.  Includes a partial
		   distribution of TinyMCE 3.2.5 for demo purposes.

</p>
<p>
Version 0.20 revised 9/15/09:  Making plugins compatible with TinyMCE 3.2.5.<br/> 
Version 0.15 revised 2/20/09:  Old version (TinyMCE 3.0) <a href="http://www.imathas.com/editordemo/tinymcemathgraphplugins0.15.zip">zip</a>
		   				<a href="http://www.imathas.com/editordemo/tinymcemathgraphplugins0.15.tar.gz">tar.gz</a>
</p>
<p>
Notes:
<ul>
<li>Requires no modification to TinyMCE editor distribution</li>
<li>Provides image-based fallback for math and editor-produced graphs</li>
<li>Output can use a modified version of ASCIIMathML 2.0, but editor uses modifications of ver 1.4.7.</li>
</ul>

</body>
</html>
